<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">

    <title>Generator</title>

    <style>
        .container {
            padding-top: 30px;
            margin: 0 auto;
            width: 500px;
        }
    </style>
</head>

<body>
    <div class="container">
        <form action="./index.html" method="get">
            <div class="mb-3">
                <label class="form-label">学号</label>
                <input name="userId" type="text" class="form-control">
                <div id="emailHelp" class="form-text">We'll never share your user info with anyone else. I Promise!
                </div>

            </div>
            <div class="mb-3">
                <label class="form-label">姓名</label>
                <input name="name" type="text" class="form-control">
            </div>

            <div class="mb-3">
                <label class="form-label">性别</label>
                <select name="gender" class="form-select" aria-label="Default select example">
                    <option selected value="1">男</option>
                    <option selected value="2">女</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">开始时间</label>
                <input name="startTime" type="datetime-local" class="form-control">
            </div>
            <div class="mb-3">
                <label class="form-label">结束时间</label>
                <input name="endTime" type="datetime-local" class="form-control">
            </div>
            <div class="mb-3">
                <label class="form-label">请假原因</label>
                <input name="leaveReason" type="text" class="form-control"
                    placeholder="Are you going to be kissed for 10 minutes, too?">
            </div>
            <div class="mb-3">
                <label class="form-label">紧急联系人</label>
                <input name="urgencyMobile" type="text" class="form-control">
            </div>
            <div class="mb-3">
                <label class="form-label">目的地</label>
                <input name="destination" type="text" class="form-control">
            </div>
            <div class="mb-3">
                <label class="form-label">年级</label>
                <select name="grade" class="form-select" aria-label="Default select example">
                    <option selected value="2021">2021</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">学院</label>
                <select name="dept" class="form-select" aria-label="Default select example">
                    <option selected value="工商管理学院">工商管理学院</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">专业</label>
                <select name="major" class="form-select" aria-label="Default select example">
                    <option selected value="电子商务">电子商务</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">班级</label>
                <select name="cls" class="form-select" aria-label="Default select example">
                    <option selected value="21电商1班">21电商1班</option>
                    <option value="21电商2班">21电商2班</option>
                    <option value="21电商3班">21电商3班</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Generate!</button>
        </form>
    </div>

</body>

</html>